<template>
  <el-table
    highlight-current-row
    @row-click="handleCurrentChange"
    :cell-style="{ padding: 0 }"
    style="font-size: 10px; width: 90%"
    :data="table_data"
  >
    <el-table-column
      show-overflow-tooltip
      prop="kubernetes_cluster_name"
      label="集群名"
      class="curPointer"
    >
    </el-table-column>
  </el-table>
</template>

<script>
import * as Request from "../../general/request";
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";

export default {
  props: {
    env_id: String,
  },
  setup(props, { emit }) {
    // let env_id = ref(props.env_select_value)
    let table_data = ref("");
    const handleCurrentChange = (val) => {
      if (val) {
        emit("childClick", val.kubernetes_cluster_id);
      }
    };

    watch(props, (new_val) => {
      if (new_val.env_id) {
        get_env_k8s_cluster();
      }
    });

    const get_env_k8s_cluster = async () => {
      const response = await Request.GET(
        "/background/home/kubernetes/env_k8s_cluster",
        { env_id: props.env_id }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          table_data.value = return_data.data;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    return {
      get_env_k8s_cluster,
      handleCurrentChange,
      table_data,
    };
  },
};
</script>

<style scoped>
.curPointer {
  cursor: pointer;
}
</style>
